<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>系统介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
    <link href="/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
    <link href="/css/animate.css" th:href="@{/css/animate.css}" rel="stylesheet" />
    <link href="/css/style.css" th:href="@{/css/style.css}" rel="stylesheet" />
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="satistics">
            <div class="col-sm-3">
                <div class="ibox totalSite float-e-margins">
                    <div class="ibox_rise"></div>
                    <div class="satisticsBox_title clearfix">
                        <div class="satisticsBox_titleBox">
                            <div class=" satisticsBox_text">站点总数</div>
                            <div class=" satisticsBox_Num zdnum">0</div>
                            <div class=" satisticsBox_texts">个</div>
                        </div>
                    </div>
                    <div class="satisticsBox_view">
                        <div class="satisticsBox_cell clearfix">
                            <div class="satisticsBox_cell_bd pull-left">可 用 站 点</div>
                            <div class="satisticsBox_cell_hd pull-left faultNum">0</div>
                        </div>
                        <div class="satisticsBox_cell clearfix">
                            <div class="satisticsBox_cell_bd pull-left">不可用站点</div>
                            <div class="satisticsBox_cell_hd pull-left normalNum">0</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox totalChargingStake float-e-margins">
                    <div class="ibox_rise"></div>
                    <div class="satisticsBox_title clearfix">
                        <div class="satisticsBox_titleBox">
                            <div class=" satisticsBox_text">充电枪总数</div>
                            <div class=" satisticsBox_Num cdztotal">0</div>
                            <div class=" satisticsBox_texts">个</div>
                        </div>
                    </div>
                    <div class="satisticsBox_view">
                        <div class="satisticsBox_cell clearfix">
                            <div class="satisticsBox_cell_bd pull-left">正在充电</div>
                            <div class="satisticsBox_cell_hd pull-left cdzdNum">0</div>
                        </div>
                        <div class="satisticsBox_cell clearfix">
                            <div class="satisticsBox_cell_bd pull-left">空闲枪数</div>
                            <div class="satisticsBox_cell_hd pull-left cdznum">0</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox totalElectric float-e-margins">
                    <div class="ibox_rise"></div>
                    <div class="satisticsBox_title clearfix">
                        <div class="satisticsBox_titleBox">
                            <div class=" satisticsBox_text">总充电量</div> 
                            <div class=" satisticsBox_Num totalDl">0</div>
                            <div class=" satisticsBox_texts">度</div>
                        </div>

                    </div>
                    <div class="satisticsBox_view">
                        <div class="satisticsBox_cell clearfix">
                            <div class="satisticsBox_cell_bd pull-left">今日充电量</div>
                            <div class="satisticsBox_cell_hd pull-left dayDlNum">0</div>
                        </div>
                        <div class="satisticsBox_cell clearfix">
                            <div class="satisticsBox_cell_bd pull-left">本月充电量</div>
                            <div class="satisticsBox_cell_hd pull-left monthDlnum">0</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox totalElectricityFees float-e-margins">
                    <div class="ibox_rise"></div>
                    <div class="satisticsBox_title clearfix">
                        <div class="satisticsBox_titleBox">
                            <div class=" satisticsBox_text">充电总金额</div>
                            <div class=" satisticsBox_Num totalCdJe">0</div>
                            <div class=" satisticsBox_texts">元</div>
                        </div>
                    </div>
                    <div class="satisticsBox_view">
                        <div class="satisticsBox_cell clearfix">
                            <div class="satisticsBox_cell_bd pull-left">今日金额</div>
                            <div class="satisticsBox_cell_hd pull-left dayje">0</div>
                        </div>
                        <div class="satisticsBox_cell clearfix">
                            <div class="satisticsBox_cell_bd pull-left">本月金额</div>
                            <div class="satisticsBox_cell_hd pull-left monthJe">0</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content realTimeState">
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="picBox">
                                    <div class="echartsBoxtitle clearfix">
                                        <div class="pull-left leftcolor"></div>
                                        <div class="pull-left echartsBoxtitleName">实时状态</div>
                                        <div class="pull-right realstateBtnV  clearfix">
                                            <div class="pull-left realstateBtn realstateall active" data-type="0">全部</div>
                                            <div class="pull-left realstateBtn realstatej" data-type="2">交流</div>
                                            <div class="pull-left realstateBtn realstatez" data-type="1">直流</div>
                                        </div>
                                    </div>
                                    <div class="echartsBoxpd">
                                        <div id="echartsBox"></div>
                                    </div>
                                    
                                    <!-- <div class="echartsBoxFoot ">
                                        <div class="echartsBoxFootCen clearfix">
                                            <div class="pull-left chondianicon"><img src="/img/chongdianzhuang-4.png" alt=""></div>
                                            <div class="pull-left zlgsB">
                                                <div class="zlgs">
                                                    <div class="zlgsTT"> 直流桩（个）</div>
                                                    <span class="zlgsNum">3543543</span> 
                                                    <div class="zlgsZb">占比100%</div>
                                                </div>
                                                <div class="chongdianzhaingbili"></div>
                                            </div>
                                            <div class="pull-left jlgsB">
                                                <div class="jlgs">
                                                    <div class="zlgsTT"> 交流桩（个）</div>
                                                    <span class="jlgsnum">0</span> 
                                                    <div class="jlgsZb">占比0%</div>
                                                </div>
                                                <div class="chongdianzhaingbili"></div>
                                            </div>
                                        </div>
                                    </div> -->
                                </div>                                
                            </div>
                            <div class="col-sm-8">
                                <div class="picBox">
                                    <div class="echartsBoxtitle clearfix">
                                        <div class="pull-left leftcolor"></div>
                                        <div class="pull-left echartsBoxtitleName">营业数据统计</div>
                                        <div class="pull-right selectYear">
                                           <input type="text" id="yearselect">
                                        </div>
                                    </div>
                                    <div class="echartsBoxlineTitle clearfix">
                                        <div class="echartsBoxlineTitle_cell pull-left">
                                            <div class="echartsBoxlineTitle_icon">
                                                <img src="/img/dianliang.png" alt="">
                                            </div>
                                            <div >
                                                <div class="echartsBoxlineTitlepic echartsBoxlineTitlepicC"></div>
                                            </div>
                                            <div class="echartsBoxlineTitlename">月充电量</div>
                                        </div>
                                        <div class="echartsBoxlineTitle_cell pull-left">
                                            <div class="echartsBoxlineTitle_icon">
                                                    <img src="/img/jine.png" alt="">
                                            </div>
                                            <div >
                                                <div class="echartsBoxlineTitlepic"></div>
                                            </div>
                                            <div class="echartsBoxlineTitlename">月充电金额</div>
                                        </div>
                                    </div>
                                    <div id="echartsBoxline"></div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>
    <script src="/js/laydate/laydate.js"></script>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/indexmain/mainSystem.js"></script>
    
</body>

</html>